Vue.component("my-post", {
    data() {
        return {
            text: '组件内部的数据'
        }
    },
    // props:['postTitle','postContent'],
    props: {
        'postTitle': {
            type: String,
            default: '你没有传入标题，使用默认标题'
        },
        postContent: String
    },
    template: `
    <div class="post">
        <h2>{{postTitle}}</h2>
        <div >{{postContent}}</div>
        <button>发帖</button>
        <button>修改</button>
        <p>{{text}}</p>
    </div>
   `
})

Vue.component('todo-item', {

    data() {
        return {
            checked: false
        }
    },
    props: ['text', 'isComplete', "todoId"],
    template: `
    <li>
        <input type="checkbox" v-on:change='handleChange(todoId)' v-model="checked">
        <span>{{isComplete ? '√' : 'x'}}</span>
        <span 
            class="todo-text"
            :class="{delete:isComplete}"
        >{{text}}</span>
    </li>`,
    methods: {
        handleChange(todoId) {
            console.log("事件传播到todoItem")
            this.$emit('changeTodo', { todoId, checked:this.checked })
        }
    }
})

Vue.component("todo-list", {
    data() {
        return {
            inputText: ''
        }
    },
    props: {
        todoListDataProp: Array
    },
    methods: {
        add() {
            this.$emit('add-todo', this.inputText)
        },
        change(obj) {
            console.log('事件传播到todoList')
            console.log(obj)
            this.$emit('change-list', obj)
        }
    },
    template: `
    <div class="todo-list">
        <div>
            <input type="text" v-model="inputText">
            <button @click="add">添加事件</button>
        </div>
        <ul>
            <transition-group name="fade" >
                <todo-item 
                    v-for="(item,index) in todoListDataProp"
                    :key="index"
                    :text="item.text"
                    :is-complete="item.isComplete"
                    :todo-id="item.id"
                    v-on:changeTodo="change"
                />
            </transition-group>
        </ul>
    </div>
    `
})


new Vue({
    el: '#app',
    data: {
        text: 'vue实例传入数据',
        isComplete: true,
        todoListData: [
            { text: '学习hmtl', isComplete: false, id: 1 },
            { text: '学习CSS', isComplete: false, id: 2 },
            { text: '学习Js', isComplete: false, id: 3 }
        ],
    },
    methods: {
        addTodo(text) {
            console.log(text)
            this.todoListData.push({ text: text, isComplete: false })
        },
        changeMyList(obj) {
            console.log('事件传播到实例')
            console.log(obj)
            const currentTOdo = this.todoListData.find(item => item.id==obj.todoId)
            currentTOdo.isComplete = obj.checked
        }
    }

})

